window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  //   每日待办内容
  var data = [
    {
      id: 1,
      name: "王大强",
      sex: "男",
      number: 320729184874318,
      tel: 17768089801,
      place: "四川省/成都市/成华区",
      type: "次密",
      Registrant: "系统",
      date: "2022-11-12",
    },
    {
      id: 2,
      name: "李思国",
      sex: "男",
      number: 320729188871231,
      tel: 177680898012,
      place: "江苏省/苏州市/姑苏区",
      type: "密接",
      Registrant: "王强",
      date: "2022-10-12",
    },
    {
      id: 3,
      name: "王宝玉",
      sex: "女",
      number: 320729188872312,
      tel: 17768089803,
      place: "浙江省/杭州市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2020-11-02",
    },
    {
      id: 4,
      name: "白飞",
      sex: "男",
      number: 320729188872313,
      tel: 17768089804,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 5,
      name: "慕雪晴",
      sex: "女",
      number: 320729188872415,
      tel: 17768089805,
      place: "四川省/乐山市/犍为",
      type: "密接",
      Registrant: "白飞",
      date: "2020-09-12",
    },
    {
      id: 6,
      name: "张海迪",
      sex: "男",
      number: 320729188876343,
      tel: 17768089807,
      place: "四川省/宜宾市/姑苏区",
      type: "密接",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 7,
      name: "李芳菲",
      sex: "女",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 8,
      name: "张国焘",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 9,
      name: "博浩东",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 10,
      name: "汪峰",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 11,
      name: "谢晓",
      sex: "女",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 12,
      name: "王璐",
      sex: "女",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 13,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 14,
      name: "薛之谦",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 15,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 16,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 17,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 18,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 19,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 20,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
    {
      id: 21,
      name: "郭京飞",
      sex: "男",
      number: 320729188872318,
      tel: 17768089879,
      place: "江苏省/苏州市/姑苏区",
      type: "次密",
      Registrant: "系统",
      date: "2020-11-12",
    },
  ];
  var page=1
  var count=10
  //获取分页容器
  var oPagination = document.querySelector(".pagination");
  //获取上一页的按钮
  var oPrevBtn = document.querySelector(".prev");
  //获取下一页的按钮
  var oNextBtn = document.querySelector(".next");
  var oResetBtn = document.querySelector(".resetBtn");
  //获取tbody
  var oTBody = document.querySelector("tbody");
  var oResetBtn = document.querySelector(".resetBtn");
  // 获取编辑保存按钮
  var oEditSaveBtn = document.querySelector('.editSaveBtn');
  //   页面初始化渲染
  function render() {
    oTBody.innerHTML = "";
    var renderArr = data.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
      <td><input type="checkbox"></td>
            <td>${renderArr[i].id}</td>
            <td>${renderArr[i].name}</td>
            <td>${renderArr[i].sex}</td>
            <td>${renderArr[i].number}</td>
            <td>${renderArr[i].tel}</td>
            <td>${renderArr[i].place}</td>
            <td>${renderArr[i].type}</td>
            <td>${renderArr[i].Registrant}</td>
            <td>${renderArr[i].date}</td>
            <td id="pagination">
            <button type="button" class="edit btn btn-warning btn-sm">编辑</button>
          <button class="see-btn btn btn-primary btn btn-primary btn-sm">
            查看详情
          </button>
          <button type="button" class="del btn btn-danger btn-sm">删除</button>
        </td>
            `;
      oTBody.appendChild(oTr);
    }
    var oPageBtn = document.querySelectorAll(".pageBtn");
    console.log(oPageBtn);
    for (var i = 0; i < oPageBtn.length; i++) {
      oPagination.removeChild(oPageBtn[i].parentNode);
    }
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
      if (i == page) {
        oLi.classList.add("active");
      }
      oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
  }
  
  render();
  // 分页
  oPagination.addEventListener("click", changePage);
  function changePage() {
    if (event.target.className == "pageBtn") {
      page = event.target.innerText;
      render();
    }
  }
  oPrevBtn.addEventListener("click", prev);
  oNextBtn.addEventListener("click", next);
  function prev() {
    if (page > 1) {
      page--;
      render();
    }
  }
  function next() {
    if (page < Math.ceil(data.length / count)) {
      page++;
      render();
    }
  }
  // 批量删除
  var deleteBtn=document.querySelector('.batch-delete')
  deleteBtn.addEventListener('click',batchDeleteFn)
  function batchDeleteFn(){
    var aInput=document.querySelectorAll('tbody input')
    var checkedArr=[]
    for(var i=0;i<aInput.length;i++){
      if(aInput[i].checked==true){
        $("#resetModal").modal("show");
      checkedArr.push(aInput[i].parentNode.nextElementSibling.innerHTML)
      }
    }
    oResetBtn.addEventListener("click", resetPass);
  function resetPass() {
    for(var i=0;i<checkedArr.length;i++){
      for(var j=0;j<data.length;j++){
        if(checkedArr[i]==data[j].id){
         data.splice(j,1)
        }
      }
    }
    render();
    $("#resetModal").modal("hide");
  }
  }
    // 单个删除
  var id;
  oTBody.addEventListener("click", del);
  function del() {
    if (event.target.className.includes("del")) {
      $("#resetModal").modal("show");
      id = event.target.parentNode.parentNode.children[1].innerText;
      console.log(id)
    }
  }
  oResetBtn.addEventListener("click", resetPass);
  function resetPass() {
    //循环数据对比
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data.splice(i, 1);
      }
    }
    render();
    $("#resetModal").modal("hide");
  }
  // 编辑
  oTBody.addEventListener('click', openEdit);
function openEdit() {
    if (event.target.className.includes('edit')) {
        $('#editModal').modal('show');
        var id = event.target.parentNode.parentNode.children[1].innerText;
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value = data[i].id;

                document.querySelector('.editName').value = data[i].name;

                if (data[i].sex == '女') {
                    document.querySelector('#editRadio2').checked = true;
                }

                document.querySelector('.editID').value = data[i].number;

                document.querySelector('.editAddress').value = data[i].place;

                document.querySelector('.editTel').value = data[i].tel;
                if (data[i].type == '密接') {
                  document.querySelector('#editRadio3').checked = true;
              }
            }
        }
    }

}
oEditSaveBtn.addEventListener('click', editSave);
function editSave() {
    var id = document.querySelector('.editId').value;
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
            data[i].name = document.querySelector('.editName').value;
            data[i].tel = document.querySelector('.editTel').value;
            data[i].number =  document.querySelector('.editID').value
            data[i].sex = document.querySelector('#editRadio1').checked ? '男' : '女';
            data[i].type = document.querySelector('#editRadio3').checked ? '密接' : '次密';
            data[i].place= document.querySelector('.editAddress').value
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    render();
}
oTBody.addEventListener('click',seeFn)
function seeFn(){
  if(event.target.className.includes('see-btn')){
    var id=event.target.parentNode.parentNode.children[1].innerText-1
    console.log(id)
    var str=JSON.stringify(data[id]);
    localStorage.setItem('username',str)
    location.href='./FollowPage.html'
  }
}
// 导出
var element = document.getElementById("oExcel");
var oExcel = function (event) {
  var html =
    "<html><head><meta charset='UTF-8'></head><body>" +
    document.querySelector(".table-size").outerHTML +
    "</body></html>";
  var blob = new Blob([html], { type: "application/vnd.ms-excel" });
  event.target.href = URL.createObjectURL(blob);
  event.target.download = "每日新增信息统计表";
};
element.onclick = oExcel;
};

